<template>
  <div id="online-chart">
    <h2>
      各类车今日上线情况
    </h2>
    <div class="box box1" v-if="home_state!=='company_group'">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <!--上线车辆图标-->
      <div id="online-chart-box"></div>
    </div>
    <div class="box box2">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <!--第二个盒子-->
      <div class="box2-left">
        <span >活跃车数</span>
        <span class="box2-left-number">{{activeArr[0]}}</span>
      </div>
      <div class="box2-right">
        <span>非活跃车数</span>
        <span class="box2-right-number">{{activeArr[1]}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import DateTimeHelper from '../../util/datetime-helper.js'
  import MYCONF from '../../myconf'

  export default {
    name: 'OnlineChart',
    data () {
      return {
        dataAxis: ['出租车', '公交车', '旅游包车', '危险货车', '普通货车', '班线客车'],
        // data: [21, 12, 33, 34, 78, 23],
        // data: [0, 0, 0, 0, 0, 0],
        dataShadow: [100, 100, 100, 100, 100, 100],
        activeNumber: 0,
        unActiveNumber: 0
      }
    },

    computed:{
      ...mapGetters({
        companyInfo: "company_info",
        "home_state": "home_state",
        data: "homeChart/onlineTypeArr",
        activeArr: "homeChart/activeArr",
        formatHistoryTime: "homeChart/selectedTime"
      }),
    },

    mounted(){
      // this.activeNumber = 688;
      // this.unActiveNumber = 255;
      this.getBarData();
      this.getActiveData();
    },

    methods: {
      initChars(){
       /* console.log("上线情况：",this.data)*/
        this.onlineChartBox = echarts.init(document.getElementById('online-chart-box'));
        let option = {
          xAxis: {
            data: this.dataAxis,
            axisLabel: {
              inside: false,
              textStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true
            },
            z: 10,
            splitLine: {
              show: false
            },

          },
          yAxis: {
            axisLine: {
              show: true
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }, splitLine: {
              show: false
            },
            grid: {
              borderWidth: 0,
              y: 0,
              y2: 0
            }
          },
          grid: {
            left: 25,
            top: 15,
            right: 15,
            bottom: 20
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            { // For shadow
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#1b2d4e',
                  borderWidth:"2",
                  borderColor:"#2e4e5d"},
              },
              barGap: '-100%',
              barCategoryGap: '60%',
              data: [100, 100, 100, 100, 100, 100],
            },
            {
              type: 'bar',
              itemStyle: {
                normal: {
                    color: (params) => {
                        if(this.data[params.dataIndex] > 60){
                          return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                              {offset: 0, color: '#4368a9'},
                              {offset: 1, color: '#42bccf'}
                            ]
                          )
                        }else{
                          return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                              {offset: 0, color: '#d58965'},
                              {offset: 1, color: '#faa842'}
                            ]
                          )
                        }
                    },
                  label: {
                    show: true,
                    position: 'top',
                    color:"#fff",
                    formatter: '{c}%',
                    fontFamily:'ds-digitalbold-webfont'
                  }
                }
              },
              data: this.data,
              zlevel: 10
            }
          ]
        };
        this.onlineChartBox.setOption(option);
      },

      getBarData: function() {
        this.$store.dispatch("homeChart/requsetOnlineTypeArr", {
          dateCur: DateTimeHelper.getNewTimeBySecends(DateTimeHelper.getCurTime(), -MYCONF.TIME_INTERVAL * 60),
          dateNext: DateTimeHelper.getCurTime()
        });
      },

      getActiveData: function() {
        this.$store.dispatch("homeChart/requsetActiveArr", {
          companyId: this.home_state === "realtime" ? 0 : this.companyInfo.id,
          dateCur: DateTimeHelper.getNewTimeBySecends(DateTimeHelper.getCurTime(), -MYCONF.TIME_INTERVAL * 60),
          dateNext: DateTimeHelper.getCurTime()
        });
      }
    },

    watch: {
      home_state: function(newValue, oldValue) {
        if (this.home_state === 'realtime') {
          this.getActiveData();
          this.getBarData();
        }
        if (this.home_state === 'company_group'){
          this.getActiveData();
        }
        if (this.home_state === 'alarm_info'){
          this.getBarData();
        }
      },

      data: function(n, o) {
        this.initChars();
      },

      companyInfo: function() {
        if (this.home_state === 'company_group') this.getActiveData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #online-chart {
    width: 100%;
    /*height: 320px;*/
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
    h2 {
      @include linearTitle;
    }
    .box {
      position: relative;
      box-sizing: border-box;
      padding: 10px;
      &.box1 {
        height: 222px;
      }
      &.box2 {
        height: 56px;
        margin-top: 5px;
      }
      @include borderBlur;
      .icon {
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon {
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon {
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon {
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon {
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
    }
  }

  #online-chart-box {
    width: 100%;
    height: 100%;
  }

  .box2-left ,.box2-right{
    display: inline-block;
    &.box2-left{
      margin-right: 46px;
    }

    &.box2-right{
      margin-left: 46px;
    }
    span{
      font-size: $font-normal;
      line-height: 34px;
      vertical-align: middle;
      &.box2-left-number{
        color: #05d6c9;
        line-height: 34px;
        font-size: 26px;
        font-family: ds-digitalbold-webfont;
        margin-left: 22px;
      }

      &.box2-right-number{
        color: #618ad9;
        font-size: 26px;
        font-family: ds-digitalbold-webfont;
        line-height: 34px;
        margin-left: 22px;
      }
    }
  }

</style>
